<template>
  <div>
    <el-dialog title="导入excel"
               :visible.sync="visible"
               :before-close="doCancel"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               width="60%"
               append-to-body>
      <el-upload
        class="upload-demo"
        ref="upload"
        :action="action"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :on-success="handSuccess"
        :on-error="handError"
        :file-list="fileList"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
        <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件</div>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "UploadFile",
    props: {
      visible: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        fileList: [],
        action:this.$axios.defaults.baseURL+"excel/task/importExcel",
      }
    },
    methods: {
      //关闭弹窗
      doCancel() {
        this.$emit("changeUploadVisable", false)
      },
      submitUpload() {
        console.log(this.fileList);
        // if(this.fileList.length==0){
        //   this.$alert("请先选择文件");
        //   return;
        // }
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handSuccess(res, file, fileList){
        if(res.code==1){
          this.$alert("导入成功");
        }
      },
      handError(err, file, fileList){
        this.$alert("出错了");
        console.log(err,file,fileList);
      }
    }
  }
</script>

<style scoped>

</style>
